<template>
	<view class="container">
		<view class="status_bar" :style="{height:statusBarHeightStyle}">
			<!-- 这里是状态栏 -->
		</view>
		<view :style="{height:navBarHeight+'px',width:navBarWidth+'px'}">
			<uni-nav-bar backgroundColor="transparent" color="#ffffff" :border="false" title="网约农服"
				@clickRight="goTo('../notice/notice')">
				<view slot="right" style="margin-right: 15px;">
					<!-- <uni-badge type="error" :text="value"
						size="normal">
						<view style="width: 20px;height: 20px;"><uni-icons type="notification" size="18" color="#ffffff"></uni-icons></view>
					</uni-badge> -->
					<uni-badge :text="noticeNum" :is-dot="false" size="small" type="error" absolute="rightTop">
						<uni-icons type="notification" size="23" color="#ffffff"></uni-icons>
					</uni-badge>
				</view>
			</uni-nav-bar>
		</view>
		<search-bar ref="search" :classifies='classifies' :isRecommend='isRecommend'></search-bar>
		<view class="service-list">
			<view :class="{'st':true,'sticky-fixed':isF}">
				<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
					activeColor="#283241"></uni-segmented-control>
			</view>

			<view class="content" style="padding-bottom: 134px;">
				<view v-show="current === 0">
					<template v-for="item in list">
						<view :key="item.id" class="list-con">
							<view class="title"
								@click="goTo(`./serviceDetails/serviceDetails?id=${item.id}&sort=${item.serviceType}`)">
								{{item.title}}
							</view>
							<view class="uni-flex list-text-con"
								@click="goTo(`./serviceDetails/serviceDetails?id=${item.id}&sort=${item.serviceType}`)">
								<view class="list-text">
									<view class="summary">
										<text v-if="item.resume">{{item.resume}}</text>
									</view>
									<view class="uni-flex list-info">
										<view class="author">
											<!-- <text class="price" v-if="item.price">¥{{item.price}}</text> -->
										</view>
										<view class="see" v-if="item.browseNum"><uni-icons type="eye" color="#9498A0"
												size="14"></uni-icons><text>{{item.browseNum}}</text>
										</view>
									</view>
								</view>
								<view class="image" v-if="item.image">
									<image class="img-list"
										:src="imgUrl + item.image + '?x-image-process=style/style-list'"></image>
								</view>
								<view class="image" v-else>
									<image class="img-list"
										src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/none.png"></image>
								</view>
							</view>
							<view class="contact" @click="TakePhone(item.phone)">
								<view class="company"><text>服务商：{{item.providerName}}</text></view>
								<view class="takephone"><text style="color: #ffffff;">立即联系</text>
									<uni-icons type="phone-filled" color="#ffffff" size="16"></uni-icons>
								</view>
							</view>
						</view>
					</template>
					<view class="uni-loadmore" v-if="showLoadMore">加载中...</view>
				</view>
				<view v-show="current === 1">
					<template v-for="item in SeekList">
						<view :key="item.id" class="list-con">
							<view class="title"
								@click="goTo(`./serviceDetails/serviceDetails?id=${item.id}&sort=${item.serviceType}`)">
								{{item.title}}
							</view>
							<view class="uni-flex list-text-con"
								@click="goTo(`./serviceDetails/serviceDetails?id=${item.id}&sort=${item.serviceType}`)">
								<view class="list-text">
									<view class="summary">
										<text v-if="item.resume">{{item.resume}}</text>
									</view>
									<view class="uni-flex list-info">
										<view class="author">
											<!-- <text class="price" v-if="item.price">¥{{item.price}}</text> -->
										</view>
										<view class="see" v-if="item.browseNum"><uni-icons type="eye" color="#9498A0"
												size="14"></uni-icons><text>{{item.browseNum}}</text>
										</view>
									</view>
								</view>
								<view class="image" v-if="item.image">
									<image class="img-list"
										:src="imgUrl + item.image + '?x-image-process=style/style-list'"></image>
								</view>
								<view class="image" v-else>
									<image class="img-list"
										src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/none.png"></image>
								</view>
							</view>
							<view class="contact" @click="TakePhone(item.phone)">
								<view class=""><text>{{item.providerName}}</text></view>
								<view class="takephone"><text style="color: #ffffff;">立即联系</text>
									<uni-icons type="phone-filled" color="#ffffff" size="16"></uni-icons>
								</view>
							</view>
						</view>
					</template>
					<view class="uni-loadmore" v-if="showLoadMore">加载中...</view>
				</view>
			</view>
		</view>
		<view class="custom-fab">
			<view class="item" @click="goTo('./service/service')" v-if="isFarm"><uni-icons type="plusempty"
					color="#ffffff"></uni-icons><text class="text">农事服务</text></view>
			<view class="item" @click="goTo('./help/help')" v-if="isSeek"><uni-icons type="plusempty"
					color="#ffffff"></uni-icons><text class="text">农户求助</text></view>
		</view>
	</view>
</template>

<script>
	import {
		baseurl,
		getFormWorkList,
		getFarmSeekList,
		countSiteMessage,
		queryCurrentAccount
	} from "@/api/user.js";
	import permision from "@/js_sdk/wa-permission/permission.js"
	let imgUrl = "https://nongmao.obs.cn-north-4.myhuaweicloud.com/"
	export default {
		data() {
			return {
				noticeNum: 0,
				items: ['农事服务', '农户求助'],
				current: 0,
				list: [],
				page: 1,
				seekpage: 1,
				SeekList: [],
				maxpage: 0,
				seekmaxpage: 0,
				showLoadMore: false,
				stickyH: uni.upx2px(200),
				isF: false,
				imgUrl,
				classifies: ['4', '5'],
				isRecommend: true,
				statusBarHeightStyle: '25px',
				windowWidth: 375,
				navBarWidth: 375,
				navBarHeight: 45,
				timer: '',
				isFarm: false,
				isSeek: false,
			}
		},
		onPageScroll(e) {
			if (this.stickyH > e.scrollTop) {
				this.isF = false
			} else {
				this.isF = true
			}
		},
		onLoad() {
			queryCurrentAccount().then((res) => {
				console.log(res)
				getApp().globalData.userinfo = res.returnObj
				if (JSON.stringify(res.returnObj).indexOf('014001001002') == -1) {

					this.isFarm = false
					//console.log("1111111",this.isFarm)
				} else {
					this.isFarm = true
				}
				if (JSON.stringify(res.returnObj).indexOf('014001001002') == -1) {
					this.isSeek = false;
					//console.log("1111111",this.isSeek)
				} else {
					this.isSeek = true;
				}
			})
		},
		onShow() {
			this.initData();
			this.statusBarHeightStyle = getApp().globalData.statusBarHeight + 'px';
			this.windowWidth = getApp().globalData.windowWidth;
			this.navBarWidth = getApp().globalData.navBarWidth;
			this.navBarHeight = getApp().globalData.navBarHeight;
			const appAuthorizeSetting = uni.getAppAuthorizeSetting()
			if (appAuthorizeSetting.locationAuthorized == 'authorized') {
				this.timer = setInterval(() => {
					if (!this.$refs.search.weather) {
						uni.getLocation({
							type: 'wgs84',
							isHighAccuracy: true
						}).then((res) => {
							console.log(res)
							this.$refs.search.queryWeather({
								lat: res[1].latitude,
								lon: res[1].longitude
							});
						})
					}
					if (this.$refs.search.hotKeyword.length == 0) {
						this.$refs.search.getSearchHotKeys()
					}
				}, 300000)

			}

		},
		onUnload() {
			clearInterval(this.timer)
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.initData();
			uni.getLocation({
				type: 'wgs84',
				isHighAccuracy: true
			}).then((res) => {
				console.log(res)
				this.$refs.search.queryWeather({
					lat: res[1].latitude,
					lon: res[1].longitude
				});
			})
			if (this.$refs.search.hotKeyword.length == 0) {
				this.$refs.search.getSearchHotKeys()
			}
		},
		onReachBottom() {
			console.log("onReachBottom");
			console.log("page", this.page, this.maxpage)
			if (this.current == 0) {
				if (this.page >= this.maxpage) {
					this.showLoadMore = false;
					return
				}
				this.showLoadMore = true;
				this.page++;
				this.getFormWorkList({ //参数
					"condition": null,
					"pageNum": this.page,
					"pageSize": 10
				});
			} else {
				if (this.seekpage == this.seekmaxpage) {
					this.showLoadMore = false;
					return
				}
				this.showLoadMore = true;
				this.seekpage++;
				this.getFarmSeekList({ //参数
					"condition": null,
					"pageNum": this.seekpage,
					"pageSize": 10
				});
			}
		},
		methods: {
			async countSiteMessage() {
				const res = await countSiteMessage({});
				if (res.success) {
					this.noticeNum = res.returnObj;
					//this.noticeNum = 99;
				}
			},
			initData() {
				this.page = 1;
				this.seekpage = 1;
				this.list = [];
				this.SeekList = [];
				this.showLoadMore = true;
				this.countSiteMessage();
				this.getFormWorkList({ //参数
					"condition": null,
					"pageNum": this.page,
					"pageSize": 10
				});
				this.getFarmSeekList({ //参数
					"condition": null,
					"pageNum": this.seekpage,
					"pageSize": 10
				});
				uni.stopPullDownRefresh();
			},
			async getFormWorkList(options) {
				const res = await getFormWorkList(options)
				this.showLoadMore = false;
				console.log(res);
				this.maxpage = res.returnObj.navigateLastPage;
				console.log("testpage", this.maxpage)
				this.list = this.list.concat(res.returnObj.list);
			},

			async getFarmSeekList(options) {
				const res = await getFarmSeekList(options)
				this.showLoadMore = false;
				console.log(res);
				this.seekmaxpage = res.returnObj.navigateLastPage;
				this.SeekList = this.SeekList.concat(res.returnObj.list);
			},

			goTo(e) {
				var url = e;
				uni.navigateTo({
					url: url
				})
			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			TakePhone(e) {
				permision.requestAndroidPermission('android.permission.CALL_PHONE').then((res)=>{
					console.log("authres",res)
					if(res == 1){
						uni.makePhoneCall({
							phoneNumber: e
						});
					}else{
						permision.gotoAppPermissionSetting()
					}
				})
			},
		},

	}
</script>

<style lang="scss">
	.sticky-fixed {
		position: fixed;
		top: 0px;
		padding-top: 35px;
		background-color: #ffffff;
		z-index: 999;
		left: 30rpx;
		right: 30rpx;
	}

	page {
		background-image: url("https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/nongke-bg.png");
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-color: #F5F5F5;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.custom-weather {
		color: #ffffff;
		font-size: 40rpx;
		font-family: 'DIN';
		display: flex;
		align-items: center;
		flex-wrap: nowrap;

		image {
			width: 60rpx;
			margin-left: 6rpx;
			// margin-right: 30rpx;
		}
	}

	.custom-fab {
		position: fixed;
		bottom: 60px;
		/* #ifdef MP-WEIXIN */
		bottom: 20px;
		/* #endif */
		right: 20rpx;

		.item {
			background-color: #00B5DD;
			color: #ffffff;
			border-radius: 8px;
			text-align: center;
			padding: 20rpx;
			line-height: 20px;
			margin-bottom: 10px;

			.text {
				display: block;
			}
		}
	}

	/deep/ .uni-badge {
		border: none !important;
	}

	/* 搜索栏 */
	.search-bar /deep/ .uni-searchbar__box {
		justify-content: left !important;
	}

	.search-tips {
		padding: 2px 8px;
		height: 24px;
		line-height: 24px;
		background-color: #ffffff;
		border-radius: 20px;
		color: #505863;
		font-size: 24rpx;
		margin-left: 24rpx;
	}

	.service-list {
		padding: 30rpx 30rpx;
	}

	.segmented-control {
		background-image: linear-gradient(180deg, #D5F0FF 0%, rgb(255, 255, 255) 100%);
		border-radius: 12px 12px 0 0;
		height: 59px !important;
	}

	/deep/.segmented-control__text {
		font-size: 28rpx;
		width: 100%;
		height: 100%;
		display: block;
	}

	/deep/.segmented-control__item {
		height: 59px;
		line-height: 59px;
	}

	/deep/.segmented-control__item--text {
		font-size: 32rpx !important;
		font-weight: 500;
		border-bottom-color: #22AFFF;
	}

	.list-con {
		width: 100%;
		padding: 30rpx 30rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		border-radius: 8px;
		margin-bottom: 20px;
		margin-top: -10px;
	}

	.list-con .title {
		line-height: 26px;
		max-height: 52px;
		font-size: 36rpx;
		font-weight: 500;
		height: 26px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;

	}

	.list-text-con {
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: stretch;
		height: 160rpx;
		overflow: hidden;
	}

	.list-text-con .image .img-list {
		border-radius: 8px;
		width: 240rpx;
		height: 160rpx;
		//overflow: hidden;
	}

	/* .list-text-con .image image {
		width: 100%;
		border-radius: 8px;
	} */

	.list-text {
		flex-grow: 1;
		line-height: 22px;
		height: 160rpx;
		overflow: hidden;
	}

	.list-text .summary {
		font-size: 28rpx;
		line-height: 22px;
		height: 44px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.list-text .price {
		font-size: 40rpx;
		color: #FF5A5A;
	}

	.list-info {
		margin: 0;
	}

	.list-img {
		position: relative;
	}

	.list-img .image {
		width: 100%;
		border-radius: 8px 8px 0px 0px;
	}

	.contact {
		/* background-image: url("https://staticfile-yj.obs.myhuaweicloud.com/nongfu-1.png");
		background-repeat: no-repeat;
		background-size: 100% 100%; */
		background-color: #F5F8FB;
		border-radius: 4px;
		height: 38px;
		line-height: 38px;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		padding: 0 0 0 20rpx;
		margin-top: 15px;

		.company {
			flex: 1;
			overflow: hidden;
			height: 38px;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.takephone {
			background-image: url("https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/Rectangle%203467777.png");
			background-size: 100% 100%;
			width: 218rpx;
			height: 38px;
			line-height: 38px;
			box-sizing: border-box;
			padding-left: 20rpx;
			font-size: 28rpx;
			text-align: center;
		}
	}
</style>